﻿<template>

  <div>

    <ul>

      <li>

        <div class="add_1">

          <div class="add_11">

            <div class="add_111">

              联系人

            </div>

            <div class="add_112">

              <input v-model="name"

                     type="text"

                     placeholder="你的名字">

            </div>

          </div>

          <div class="add_12">

            <input v-model="sir"

                   class='yes man'

                   name="person"

                   type="radio"

                   value="先生"> 先生

            <input v-model="sir"

                   class='yes women'

                   name="person"

                   type="radio"

                   value="女士">女士

            <!-- <span class='yes man'><input type="radio"></span>先生<span class='yes women'><input type="radio"></span>女士 -->

          </div>

        </div>

      </li>

      <li>

        <div class="add_2">

          <div class="add_21">

            <div class="add_211">

              联系电话

            </div>

            <div class="add_212">

              <input v-model='tel'

                     type="text"

                     placeholder="你的手机号">

              <img @click="open"

                   src=""

                   alt="">

            </div>

          </div>

          <div v-show="show"

               class="add_22">

            <input v-model='tell'

                   type="text"

                   placeholder="备选电话">

          </div>

        </div>

      </li>

      <li>

        <div class="add_3">

          <div class="add_31"

               @click="addinfor">

            <div class="add_311">

              送餐地址

            </div>

            <div class="add_312">

              <input @click=" addinfor"

                     v-model="address"

                     type="text"

                     placeholder="小区/写字楼/学校等">

            </div>

          </div>

          <div class="add_32">

            <input v-model='detail'

                   type="text"

                   placeholder="详细地址(如门牌号等)">

          </div>

        </div>

      </li>

      <li>

        <div class="add_4">

          <div class="add_41">

            标签 <input v-model='other'

                   type="text"

                   placeholder="无/家/学校/公司">



          </div>

        </div>

      </li>

    </ul>

    <button @click="sure"

            class="enter">确定</button>

  </div>

</template>

<script>

export default {

  name: 'Address',

  data () {

    return {

      show: false,

      name: '',

      sir: '',


      answer: [],

      tel: '',

      tell: '',

      detail: '',

      other: '',

      address: localStorage.getItem('add_infor'),

    }

  },

  watch: {

    sir: function () {

      this.answer = [];

      this.answer.push(this.sir);

      //性别

     // console.log(this.answer[0])

    }

  },

  methods: {

    open () {

      this.show = true

    },

    addinfor () {

      this.$router.push({ name: 'Addinfor' })

    },

    sure () {

      var shdz = []

      shdz.push(this.name)

      shdz.push(this.tel)

      shdz.push(this.tell)

      shdz.push(this.detail)

      shdz.push(this.other)

      shdz.push(this.answer[0])

      this.$store.state.shouhuo.push(shdz);

     // console.log('收货地址')

      console.log( this.$store.state.shouhuo)

      this.$router.push({ name: 'Add' })

    }

  }

}

</script>

<style scoped>

.add_212 {

  position: relative;

}

.add_212 img {

  position: absolute;

  bottom: 22px;

  right: 0;

  width: 20px;

  height: 20px;

}

.man {

  margin-left: 15px;

}

.women {

  margin-left: 20px;

}

.add_111,

.add_211,

.add_311,

.add_41 {

  font-size: 18px;

}

.add_22,

.add_32 {

  margin-left: 140px;

}

.add_11,

.add_21,

.add_31,

.add_41 {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

ul li {

  margin-left: 15px;

  margin-right: 15px;

}

ul {

  background-color: white;

  box-sizing: border-box;

}

li input {

  width: 230px;

  height: 65px;

  font-size: 16px;

  color: #999;

  border: none;

}

.add_12 {

  display: flex;

  align-items: center;

  justify-content: center;

  border-bottom: 0.025rem solid #f5f5f5;

}

.add_2,

.add_3 {

  border-bottom: 0.025rem solid #f5f5f5;

}

.add_32,

.add_22 {

  margin-left: 125px;

}

.yes {

  width: 26px;

  height: 26px;

  background-color: yellowgreen;

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 900;

  border-radius: 50%;

}

.enter {

  box-sizing: border-box;

  margin-top: 15px;

  margin-left: 15px;

  border: none;

  outline: none;

  border-radius: 5px;

  width: 350px;

  height: 46px;

  color: white;

  background-color: #4cd964;

  font-weight: 700;

  font-size: 18px;

}

.add_12 {

  height: 65px;

}

.add_112,

.add_212,

.add_312 input {

  border-bottom: 0.025rem solid #f5f5f5;

}

body {

  background-color: #f5f5f5;

}

</style>